<script setup>

import { onDeactivated, onMounted, onUnmounted, reactive, ref } from 'vue-demi';
import Player from 'xgplayer';
import { Searcher } from '../../../../api/index'
import { ElMessageBox } from "element-plus";
import store from '../../../../store';
import { Video } from '../../../../model/resource';
import Catalog from '../../../../components/Catalog.vue';
import router from '../../../../route';
const router_data = ref({})
const search_result_kfs = ref([])
// 视频播放相关
let player // 播放器对象 @WAIT 目前还不支持 flv视频
let video_params // 播放器参数 
let showSearchAside = ref(false) // 显示搜索侧边栏
let showCatalog = ref(false)
onMounted(async () => {
    store.commit('hidden', 'menu')
    router_data.value = await store.state.router_data.get()
    search_result_kfs.value = router_data.value.kfs
    
    video_params = reactive({
        // id: 'vs',
        el: document.querySelector('#vs'),
        url: router_data.value.url,
        pip: true,
        autoplay: true,
        playbackRate: [0.5, 0.75, 1, 1.5, 1.75, 2, 2.25, 2.5, 3],
        download: true,
        lastPlayTime: router_data.value.start_ms ? router_data.value.start_ms/1000 : 0,
        defaultPlaybackRate: store.state.xgPlayer.defaultPlaybackRate
    })
    player = new Player(video_params)
    // 记忆播放的倍数
    player.on('playbackrateChange', data => { 
        let from = data.from
        let to = data.to
        store.state.xgPlayer.defaultPlaybackRate = to
    })
})

onUnmounted(() => {
    store.commit('show', 'menu')
    player.destroy(true)//销毁对象,并且删除dom
})

// 视频跳转事件
function onFPlayer(ms) {
    if (player.paused)
        player.play()
    player.currentTime = ms / 1000
    showSearchAside.value = false
}

// 搜索相关 @WAIT 视频搜索的结果也可以导出, 还有圈出的模式和不圈出的模式, 搜索一般是点击才打开而不是直接就放在右边
const search_key = ref()

async function onInputEnter() {
    if (search_key.value) {
        let result = await new Video().search(router_data.value.id, search_key.value)
        search_result_kfs.value = result.kfs
        if (result.kfs.length == 0) {
            ShowTip.warningBox(`没有搜索到与（关键词：${search_key.value}） 相关的内容`)
        }
        // console.log('搜索结果', result)
    } else {
        ElMessageBox.prompt('搜索内容不能为空', '提示', {
            showInput: false,
            showCancelButton: false,
            showConfirmButton: false,
            showClose: false
        })
    }
}


function onSearchClear() {
    search_result_kfs.value = router_data.value.kfs // 更改搜索框显示的内容
}

const value = ref(1)
const scale_px = 318.6 // 最普通的状态下适用, 可以通过屏幕比例调整
const scroll = ({ scrollTop }) => {
    // console.log('scroll:', scrollTop)
    value.value = (scrollTop / scale_px + 1)
}

const innerRef = ref()
const scrollbarRef = ref()
const inputSlider = (value) => {
    // console.log('inputSlider', value)
    scrollbarRef.value.setScrollTop((value - 1) * scale_px)
}

const formatTooltip = (value) => {
    // console.log('formatTooltip', value)
    // console.log('scrollbarRef', scrollbarRef)
    //    proxy = new Proxy({},{})
    //    proxy.getItem()
    // console.log('innerRef', innerRef)
    return `${Math.ceil(value)} 页`
}


const showSearch = ref(true)


function getImgUrlList() {
    let imgs = []
    search_result_kfs.value.map((pf, index) => imgs.push(pf.img))
    return imgs
}

function onClickCatalogVideo(data) {
    // scrollbarRef.value.setScrollTop(0)// 课件重回头部
    router_data.value = data
    search_result_kfs.value = data.kfs
    showCatalog.value = false
    player.src = data.url

}


function onToHome() {
    store.commit('changeStage', {
        name: 'course'
    })
}
// function onToBack() {
//     router.go(-1)
//     // window.history.go(-1)
//     // store.commit('changeStage', {path: '/video', old_data: props.old_data})
// }

</script>

<template>
    <el-header class="el-header">{{ router_data.name }}</el-header>
    <el-container>



        <el-container class="el-container">

            <el-main class="el-main-container">

                <div class="player-container">

                    <div id="vs" class="xgplayer"></div>

                </div>

                <div class="">其它内容</div>



            </el-main>

            <!-- <el-drawer v-model="showSearch" title="I am the title" :with-header="false"> -->
            <el-drawer v-model="showCatalog" title="目录" :with-header="false">
                <Catalog @clickCatalogVideo="onClickCatalogVideo" :id="router_data.id" :name="router_data.name">
                </Catalog>
            </el-drawer>

            <el-drawer v-model="showSearchAside" title="搜索工具栏" :with-header="false">
                <el-aside class="el-aside">

                    <el-row class="input-container">

                        <!-- <el-col :span="16"> -->

                        <el-input class="el-input" @clear="onSearchClear" clearable @keyup.enter="onInputEnter"
                            v-model="search_key" placeholder="请输入需要搜索的内容 (回车搜索)"></el-input>

                        <!-- </el-col> -->

                    </el-row>



                    <el-scrollbar ref="scrollbarRef" class="el-scrollbar" @scroll="scroll" :scrollTo="scrollTo">

                        <div v-for="pf, index of search_result_kfs">

                            <div ref="innerRef" class="f-container">


                                <el-image style="width: 100%;" class="f-image" :src="pf.img"
                                    :preview-src-list="getImgUrlList()" :initial-index="index" fit="cover" />
                                <!-- <img :src="pf.img" style="width: 100%" /> -->

                                <div class="f-operation">

                                    <div class="f-title">（第{{ index + 1 }}页）时间点：{{ pf.time }}</div>

                                    <div class="f-button-container">

                                        <el-button :round="true" size="small" @click="onFPlayer(pf.ms)"
                                            class="f-button">跳转

                                        </el-button>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </el-scrollbar>



                    <!-- <el-slider class="el-slider" v-model="value" :min="1" :max="search_result_kfs.kfs?(search_result_kfs.length<=1?2:search_result_kfs.length):2" :format-tooltip="formatTooltip" @input="inputSlider" /> -->

                </el-aside>

            </el-drawer>

            <div class="el-operation-aside">
                <el-button class="search-button" type="success" @click="showSearchAside = true">
                    内容检索
                </el-button>
                <el-button class="catalog-button" type="warning" @click="showCatalog = true">
                    查看目录
                </el-button>
                <el-link :href="router_data.cw" class="el-link" target="_blank">查看课件</el-link>
                <!-- <el-button class="back-button" type="error" @click="onToBack">
                    返回上一页
                </el-button> -->
                <el-button class="home-button" type="error" @click="onToHome">
                    返回主页
                </el-button>
            </div>
            <!-- </el-drawer> -->

        </el-container>

    </el-container>

    <div>This is show Page</div>

    <h5>TODO - PlayVideo And SearchVideo</h5>

    <!-- <el-button @click="onBack" >返回上一级</el-button> -->
</template>

<style lang="scss" scoped>
.el-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.el-main-container {
    flex: 6;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0 !important;
}

.el-header {
    text-align: center;
    //margin-left: 30px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 20px !important;
}


.el-operation-aside {
    flex: 0.8 !important;
    width: 100%;
    display: block;
    height: 100% !important;
    background: #cef4f4ab;
    border-radius:  7%;
    display: flex;
    margin-left: 10px;
    flex-direction: column;
    // border-left: #a4b7b7 solid 3px;
    // margin-right: 20px;
}

.el-link {
    color: #ececec;
    margin: 20px;
    font-size: medium;
    line-height: 33px;
    border-radius: 7%;
    width: 50%;
    align-self: center;
    text-align: center;
    background-color: #ed584d;
}


.catalog-button {
    width: 50% !important;
    margin: 20px;
    align-self: center;
}

.search-button {
    width: 50% !important;
    margin: 20px;
    align-self: center;
}

.back-button{
    width: 50% !important;
    margin: 20px;
    align-self: center;
    background: #d5fcdb;
}

.home-button{
    width: 50% !important;
    margin: 20px;
    align-self: center;
    background: #fef4db;
}

.el-aside {
    flex: 3;
    width: 100%;
    height: 100%;
    background: #f7f4f4;
    border-left: #a4b7b7 solid 3px;
}

.el-scrollbar {
    height: 88%;
    padding: 0 !important;
}

.el-slider {
    width: 100% !important;
    height: 38px;
}

.input-container {
    padding: 4px 0;
    background: #e8efef;
}

.el-input {
    margin: 2px 60px;
}

.player-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
}

.xgplayer {
    width: 100% !important;
    height: 100% !important;
}

.el-header {
    height: 20px;
}

.f-container {
    width: 100%;
    margin-top: 4px;
    height: fit-content;
    border-bottom: 2.2px #75a1a1 solid;
    border-radius: 1%;
}

.f-operation {
    margin: 0 2px;
    padding: 3px 0;
    display: flex !important;
    flex-direction: row;
    width: 100% !important;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
    background: #f7e5e5;
    border-bottom-left-radius: 3%;
    border-bottom-right-radius: 3%;
}

.f-title {
    height: 50rpx;
    line-height: 50prx;
    text-align: center;
    flex: 7;
}

.f-button-container {
    margin: 0;
    flex: 3;
    align-self: center;
    color: #ffffff;
}


.f-button {}
</style>